import React from 'react';
import { PopConfirm } from '@teamix/ui';
import intl from '../../../../../../../../../locale';

export default class Confirm extends React.Component {
  state = {
    visible: false,
  };

  onCancel = () => {
    this.setState({
      visible: false,
    });
  };

  onConfirm = () => {
    this.setState({
      visible: false,
    });

    this.props.onClick();
  };

  onVisibleChange = (visible) => {
    this.setState({
      visible,
    });
  };

  render() {
    const { visible } = this.state;
    const { trigger, projectName } = this.props;
    return (
      <PopConfirm
        triggerType="click"
        popupStyle={{ minWidth: '400px', width: '400px' }}
        align="br"
        title={intl.get({
          id: 'code-assets.audit.containers.btnConfirm.Note',
          defaultMessage: '请注意',
        })}
        content={
          <div className="sls-remove-auth-popup">
            <span className="remove-auth">
              {intl.get({
                id: 'code-assets.audit.containers.btnConfirm.AfterTheAuthorizationIsRevoked',
                defaultMessage:
                  '解除授权后不再继续同步企业日志，SLS无法管理和分析日志数据，确认要解除吗？',
              })}
            </span>
            <span className="delete-data">
              {intl.get(
                {
                  id: 'code-assets.audit.containers.btnConfirm.IfYouNoLongerUse',
                  defaultMessage:
                    '如不再使用，请前往 SLS 中手动删除 {projectName} 的日志数据，避免产生存储费用。',
                },
                { projectName },
              )}
            </span>
          </div>
        }
        onConfirm={this.onConfirm}
        onCancel={this.onCancel}
        visible={visible}
        onVisibleChange={this.onVisibleChange}
        trigger={trigger}
        type="warning"
      />
    );
  }
}
